<template>
  <div id="home">
    <el-container>
      <el-header style="padding: 0">
        <el-menu
          background-color="#ffffff82"
          text-color="#309286"
          style="border-bottom-color: #ffffff2e"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1"
            ><el-avatar :size="50">
              {{ nickname }}
            </el-avatar></el-menu-item
          >
          <el-menu-item index="2">笔记本</el-menu-item>
          <el-menu-item index="3">小工具</el-menu-item>
          <el-menu-item index="4" disabled>未完成</el-menu-item>
          <el-menu-item index="5" disabled>未完成</el-menu-item>
          <el-menu-item index="6" disabled>未完成</el-menu-item>

          <el-menu-item index="9" style="float: right" @click="logOut">
            <i class="el-icon-switch-button" />
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-container style="height: calc(100vh - 60px)">
        <el-main>
          <transition name="transitionRouter">
            <router-view />
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { URLS } from "@/router";
import storageUtil from "@/util/StorageUtil";
export default {
  data() {
    return {
      nickname: "",
      activeIndex: storageUtil.getItem("activeIndex"),
    };
  },
  created() {
    let nickname = this.$route.params.nickname;
    if (!nickname) {
      nickname = storageUtil.getItem("nickname");
    }
    // 截取昵称第一位字符显示
    this.nickname = nickname.charAt(0);
    // 点击笔记本则迁移到子路由中
    if (this.activeIndex === "2") {
      this.$router.push({
        path: URLS.home + "/panel",
      });
    }
  },
  methods: {
    // 退出
    logOut() {
      this.$confirm("将会退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          storageUtil.clear();
          window.clearInterval(window.refreshInt);
          this.$router.push({
            path: URLS.login,
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleSelect(key, keyPath) {
      if (key === "9") {
        // 退出按钮按下不做反应,由绑定的事件处理
        return;
      }
      this.activeIndex = key;
      storageUtil.add("activeIndex", key);
      switch (key) {
        case "1": // 个人中心
          this.$router.push({
            path: URLS.home + "/user",
          });
          break;
        case "2": // 笔记本控制台
          this.$router.push({
            path: URLS.home + "/panel",
          });
          break;
        case "3": // 小工具
          this.$router.push({
            path: URLS.home + "/util",
          });
          break;
        default:
          this.$router.push({
            path: URLS.home,
          });
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>

#home .el-avatar {
  background: #5cc5b9;
}
</style>
